<template>
  <div class="user-container">
    <el-card style="margin-bottom: 10px">
      <el-row justify="space-between">
        <el-col :span="6"
          ><el-input v-model="page.name" placeholder="输入菜品名称" @input="selectByName"
        /></el-col>
        <el-col :span="12"
          ><el-button type="danger" plain>批量删除</el-button
          ><el-button type="primary" plain>批量应售</el-button
          ><el-button type="warning" plain>批量停售</el-button></el-col
        >
      </el-row></el-card
    >

    <el-table :data="dishList" border>
      <el-table-column prop="name" label="菜品名称" />
      <el-table-column prop="image" label="图片" />
      <el-table-column prop="categoryName" label="菜品分类" />
      <el-table-column prop="price" label="售价" />
      <el-table-column prop="status" label="出售状态" />
      <el-table-column prop="updateTime" label="最后操作时间" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button link type="primary" size="small" @click="edit(row.id)">编辑</el-button>
          <el-button link type="primary" size="small" @click="stopSell(row.id)">停售</el-button>
          <el-button link type="primary" size="small" @click="delCate(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      :page-size="page.pageSize"
      layout="prev, pager, next"
      :total="page.total"
      @current-change="changePage"
    />
  </div>
</template>

<script setup>
import { getDishListApi } from '@/api/dish.js'
import { ref, reactive, onMounted } from 'vue'
// import { employeeStore } from '@/stores/index.js'
import { ElMessage } from 'element-plus'
// const store = employeeStore()
onMounted(async () => {
  getDishList()
})

//菜品列表
const dishList = ref([])
//分页参数
const page = reactive({
  page: 1,
  pageSize: 5,
  name: '',
  total: 0
})

//获取菜品分类列表
const getDishList = async () => {
  const res = await getDishListApi(page)
  dishList.value = res.data.list
  page.total = res.data.total
}
// //分页查询
const changePage = (val) => {
  page.page = val
  getDishList()
}

const selectByName = (val) => {
  page.name = val
  getDishList()
}

// //编辑菜单弹层显示
// const editDialogShow = ref(false)
// const editRef = ref(null)
// const edit = async id => {
//   editDialogShow.value = true
//   nextTick(() => {
//   //  console.log(editRef.value);
//   //  debugger
//     editRef.value.getCateDetail(id)

//   })
// }

// const editSuccess = () => {
//   editDialogShow.value = false
//   getCateList()
// }

const stopSell = (id) => {
  console.log(id)
}
</script>
